<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="Simple JQuery custom selectbox plugin to change the original selectbox appearance into a styled and style-able selectbox element. Blablabla... Whatever..." name="description">
<title>Demo for JQuery Custom SelectBoxes</title>
<style>
* {
  margin:0;
  padding:0;
}
body {
  background-color:white;
  padding:50px 50px;
  font:normal normal 12px/normal Arial,Sans-Serif;
  color:black;
}
h1,h3 {
  margin:30px 0 10px;
  font-weight:bold;
  font-size:15px;
  display:block;
}
h1 {
  font-size:40px;
  margin:0 0 30px;
}
a {
  color:darkblue;
  text-decoration:none;
}
a:focus {background-color:gold}
a:hover {
  color:blue;
  text-decoration:underline;
}
.section {
  border:3px double #ccc;
  padding:0 30px 30px;
  margin:0 0 10px;
}
.usage p {margin:0 0 15px}
.usage pre {
  border:1px solid #ccc;
  background:none;
  padding:10px 12px;
  margin:0 0 30px;
  overflow:auto;
}
.usage code {
  font:normal normal 12px 'Courier New',Courier,Monospace;
  color:black;
}
.usage ul {
  margin:0 0 20px 3em;
}
.usage ul li {list-style-type:disc}
/* CUSTOM CLASSES */
.my-selectbox {
  display:inline-block;
  background-color:#FE6602;
  border:1px solid #CB5A12;
  font:normal bold 13px/28px 'Trebuchet MS',Trebuchet,Geneva,Arial,Sans-Serif;
  color:white;
  position:relative;
}
.my-selectbox,
.my-selectbox ul {
  padding:0 15px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
.my-selectbox .btn {
  display:block;
  cursor:pointer;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  text-align:center;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.my-selectbox ul {
  margin:0 0;
  padding:0 0;
  background-color:#FE6602;
  border:1px solid #CB5A12;
  position:absolute;
  top:100%;
  left:-1px;
  width:200px;
  z-index:99;
  font-size:12px;
  -webkit-box-shadow:0 5px 10px -2px rgba(0,0,0,.4);
  -moz-box-shadow:0 5px 10px -2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 10px -2px rgba(0,0,0,.4);
}
.my-selectbox li {
  list-style:none;
  margin:0 0;
  padding:0 0;
  cursor:pointer;
  line-height:24px;
  padding:0 10px;
  font-weight:normal;
}
.my-selectbox li:hover {
  background-color:#EA5D03;
}
.my-selectbox li.active,
.my-selectbox li.active:hover {
  background-color:#4D4036;
  margin:2px 2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}
.my-selectbox li.nope,
.my-selectbox li.nope:hover {
  color:#FFB789;
  background:none;
  cursor:text;
  cursor:none;
}
.my-selectbox .btn.in-focus {
  background-color:#EA5D03;
  -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
  cursor:default;
}
</style>
<link rel="stylesheet" href="style.css" type="text/css">

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<!-- script type="text/javascript" src="jquery.custom.selectbox.js"></script -->
<script src="jquery.custom.selectbox.min.js"></script>
<script>
$(document).ready(function() {
	$('#sample-1 select').customSelectBox().change(function() {
		alert($(this).val());
	});
	// Custom classes for special selectbox
	$('#sample-2 select').customSelectBox({
		selectboxClass: 'my-selectbox',
		buttonClass: 'btn',
		selectedClass: 'active',
		disabledClass: 'nope',
		focusedClass: 'in-focus'
	}).change(function() {
		$(this).closest('.section').find('h3').css('background-color', $(this).val());
	});
});
</script>
</head>
<body>

<h1><a href="http://hompimpaalaihumgambreng.blogspot.com/2012/12/plugin-jquery-custom-select-box.html" data-href="https://plus.google.com/108949996304093815163">Simple JQuery Custom SelectBoxes Demo</a></h1>

<div class="section" id="sample-1">

	<h3>Basic Select Box</h3>
	<select>
		<option value="value-1">Red Style</option>
		<option value="value-2">Orange Style</option>
		<option value="value-3">Yellow Style</option>
		<option value="value-4">Green Style</option>
		<option value="value-5">Blue Style</option>
		<option value="value-6">Purple Style</option>
	</select>

	<h3>Options without Value Attribute</h3>
	<select>
		<option>Red Style</option>
		<option>Orange Style</option>
		<option>Yellow Style</option>
		<option>Green Style</option>
		<option value="I&#39;m a value">Blue Style</option>
		<option>Purple Style</option>
	</select>

	<h3>Selected Option</h3>
	<select>
		<option value="value-1">Red Style</option>
		<option value="value-2">Orange Style</option>
		<option value="value-3" selected>Yellow Style</option>
		<option value="value-4">Green Style</option>
		<option value="value-5">Blue Style</option>
		<option value="value-6">Purple Style</option>
	</select>

	<h3>Disabled Option</h3>
	<select>
		<option disabled>Lorem Ipsum 1</option>
		<option value="Sample Value 2">Lorem Ipsum 2</option>
		<option value="Sample Value 3" selected>Lorem Ipsum 3</option>
		<option value="Sample Value 4">Lorem Ipsum 4</option>
		<option value="Sample Value 5">Lorem Ipsum 5</option>
		<option value="Sample Value 6" disabled>Lorem Ipsum 6</option>
	</select>

</div>

<div class="section" id="sample-2">

	<h3>Custom Classes</h3>
	<select>
		<option value="transparent">Normal Header</option>
		<option value="red">Red Header</option>
		<option value="green">Green Header</option>
		<option value="blue">Blue Header</option>
		<option value="yellow">Yellow Header</option>
		<option value="purple" disabled>Purple Header</option>
	</select>

</div>

<div class="section usage" id="usage">

<h3>Basic Usage:</h3>
<p>Put the <a href="style.css" target="_blank">custom selectbox stylesheet</a>, your JQuery library and my <a href="jquery.custom.selectbox.min.js" target="_blank">simple custom selectbox plugin</a> above the <code>&lt;/head&gt;</code> code:</p>
<pre><code>...
...

&lt;link rel="stylesheet" href="css/style.css"&gt;
&lt;script src="js/jquery.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.custom.selectbox.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function() {
    $('select').customSelectBox().change(function() {
        // Stuff that will be triggered based on the selectbox change event
    });
});
&lt;/script&gt;
&lt;/head&gt;</code></pre>

<p>This plugin will wrap the original selectbox element and add some HTML tags as a fake selectbox element:</p>
<pre><code>&lt;!-- Generated HTML Markup --&gt;

&lt;div class="styled-select"&gt;
    &lt;select style="visibility:hidden;"&gt;
        &lt;option value="value-1" selected&gt;Lorem Ipsum 1&lt;/option&gt;
        &lt;option value="value-2"&gt;Lorem Ipsum 2&lt;/option&gt;
        &lt;option value="value-3"&gt;Lorem Ipsum 3&lt;/option&gt;
        &lt;option value="value-4" disabled&gt;Lorem Ipsum 4&lt;/option&gt;
    &lt;/select&gt;
    &lt;span class="curr"&gt;Lorem Ipsum 1&lt;/span&gt;
    &lt;ul style="display:none;"&gt;
        &lt;li class="selected o-0" data-value="value-1"&gt;Lorem Ipsum 1&lt;/li&gt;
        &lt;li class=" o-1" data-value="value-2"&gt;Lorem Ipsum 2&lt;/li&gt;
        &lt;li class=" o-2" data-value="value-3"&gt;Lorem Ipsum 3&lt;/li&gt;
        &lt;li class="disabled o-3" data-value="value-4"&gt;Lorem Ipsum 4&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;</code></pre>

<p>Where:</p>
<ul>
	<li><code>styled-select</code> &rArr; <code>selectboxClass</code></li>
	<li><code>curr</code> &rArr; <code>buttonClass</code></li>
	<li><code>selected</code> &rArr; <code>selectedClass</code></li>
	<li><code>disabled</code> &rArr; <code>disabledClass</code></li>
	<li><code>focused</code> &rArr; <code>focusedClass</code></li>
</ul>

<h3>Custom Classes</h3>
<p>You also can modify the custom selectbox classes by configuring this plugin options:</p><pre><code>$('select').customSelectBox({
    selectboxClass: 'my-selectbox',
    buttonClass: 'my-selectbox-button',
    selectedClass: 'my-selectbox-selected-state',
    disabledClass: 'my-selectbox-disabled-class',
    focusedClass: 'my-selectbox-focus-state'
}).change(function() {});</code></pre>

<p>Then, this is your basic custom selectbox CSS:</p>
<pre><code>/* selectbox outer */
.my-selectbox {
  display:inline-block;
  position:relative;
  line-height:28px;
  height:28px;
  border:1px solid;
  background-color:white;
}

/* select element inside the custom selectbox */
.my-selectbox select {
  padding:0 0;
  margin:0 0;
  height:0;
  visibility:hidden;
}

.my-selectbox,
.my-selectbox .my-selectbox-button {padding:0 10px}

/* selectbox button (current value holder) */
.my-selectbox .my-selectbox-button {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  cursor:pointer;
}

/* focused selectbox button */
.my-selectbox .my-selectbox-button.my-selectbox-focus-state {
  background-color:gray;
}

/* dropdown menu (fake option list) */
.my-selectbox ul {
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:100%;
  right:0;
  left:0;
  background-color:white;
  border:1px solid;
  z-index:99;
}

/* menu item (fake option item) */
.my-selectbox li {
  list-style:none;
  margin:0 0;
  padding:0 10px;
  cursor:pointer;
}

/* hover state */
.my-selectbox li:hover {
  background-color:yellow;
}

/* selected option */
.my-selectbox li.my-selectbox-selected-state {
  color:red;
}

/* disabled option */
.my-selectbox li.my-selectbox-disabled-class {
  color:gray;
  cursor:text;
}</code></pre>

</div>

</body>
</html>